<template>
  <div class="form">
    <div id="subscribeChoose" style="padding-top: 20px">
      <input type="radio" id="person" value="person" v-model="subscribeType">
      <label for="person" @click="clickPerson">个人取现预约</label>
      <input type="radio" id="public" value="public" v-model="subscribeType">
      <label for="public" @click="clickPublic">对公取现预约</label>
    </div>
    <!--<div class="loanapply bbg" v-if="subscribeType == 'person'">-->
    <div class="midbox">
      <ul class="fromul">
        <li v-if="subscribeType == 'person'">
          <div>客户姓名</div>
          <div><input type="text" placeholder="请输入您的姓名"></div>
          <div></div>
        </li>
        <li v-if="subscribeType == 'public'">
          <div>基本户账号/单位结算卡</div>
          <div><input type="text" placeholder="请输入基本户账号/单位结算卡"></div>
          <div></div>
        </li>
        <li v-if="subscribeType == 'public'">
          <div>办理人姓名</div>
          <div><input type="text" placeholder="请输入您的姓名"></div>
          <div></div>
        </li>
        <li v-if="subscribeType == 'person'">
          <div>认证方式</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择认证方式" v-model="certifytype"
                                           @click="selectCertify"></div>
          <div></div>
        </li>
        <li v-if="certifytype == '身份证件' | subscribeType == 'public'">
          <div>证件类型</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择证件类型" v-model="idtype"
                                           @click="selectId"></div>
          <div></div>
        </li>
        <li v-if="subscribeType == 'person'">
          <div>认证号码</div>
          <div><input type="text" placeholder="请输入认证号码"></div>
          <div></div>
        </li>
        <li v-if="subscribeType == 'public'">
          <div>证件号码</div>
          <div><input type="text" placeholder="请输入认证号码"></div>
          <div></div>
        </li>
        <li id="money">
          <div>取现金额(人民币)</div>
          <div><input type="text" v-model="money" placeholder="请输入取现金额" @blur="checkMoney(money)"></div>
          <div></div>
        </li>
        <div v-if="showMoneyError" style="color: red; font-size: 15px; border-top: 4px"><span>请输入整百金额</span></div>
        <li>
          <div>城市</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择网点所在城市" v-model="city"
                                           @click="selectCity"></div>
          <div></div>
        </li>
        <li v-if="city == '南京市'">
          <div>区</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择网点所在区" v-model="district"
                                           @click="selectDistrict"></div>
          <div></div>
        </li>
        <li>
          <div>网点</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择网点" v-model="branch"
                                           @click="selectBranch"></div>
          <div></div>
        </li>
        <li>
          <div>预约日期</div>
          <div><!-- 年 -->
            <select class="dateSelect" v-model="year" @change="changeYear">
              <option selected="selected" v-for="item in yearlist" :key="item.id" :value="item">{{item}}</option>
            </select>

            <!-- 月 -->
            <select class="dateSelect" v-model="month" @change="changeMonth">
              <option selected="selected" v-for="item in monthlist" :key="item.id" :value="item">{{item}}</option>
            </select>

            <!-- 日 -->
            <select class="dateSelect" v-model="day">
              <option selected="selected" v-for="item in daylist" :key="item.id" :value="item">{{item}}</option>
            </select></div>
          <div></div>
        </li>
        <li>
          <div>预约时间段</div>
          <div class="selectManage"><input type="text" readonly="readonly" placeholder="请选择时间段" v-model="time"
                                           @click="selectTime"></div>
          <div></div>
        </li>
        <li>
          <div>手机号码</div>
          <div><input type="text" placeholder="请输入手机号"></div>
          <div>
            <button style="padding:3px 10px;">获取</button>
          </div>
        </li>
        <li>
          <div>手机动态密码</div>
          <div><input type="text" placeholder="请输入手机动态密码"></div>
          <div></div>
        </li>
        <li>
          <div>验证码</div>
          <div><input type="text" placeholder="请输入验证码"></div>
          <div></div>
        </li>
        <li>
          <div>备注</div>
          <div><input type="text" placeholder="请输入备注"></div>
          <div></div>
        </li>
      </ul>
      <button id="submit" @click="submit">
        提交
      </button>
      <button id="cancel" @click="cancel">
        取消
      </button>

      <div id="certify" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="certify in certifyList" @click="sureSelectCertify(certify)">
            {{certify}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectCertify">
            取消
          </li>
        </ul>
      </div>
      <div id="id" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="id in idTypeList" @click="sureSelectId(id)">
            {{id}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectId">
            取消
          </li>
        </ul>
      </div>

      <div id="city" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="city in cityList" @click="sureSelectCity(city)">
            {{city}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectCity">
            取消
          </li>
        </ul>
      </div>

      <div id="district" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="district in districtList" @click="sureSelectDistrict(district)">
            {{district}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectDistrict">
            取消
          </li>
        </ul>
      </div>

      <div id="branch" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="branch in branchList" @click="sureSelectBranch(branch)">
            {{branch}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectBranch">
            取消
          </li>
        </ul>
      </div>

      <div id="time" class="mui-popover mui-popover-bottom mui-popover-action ">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="time in timeList" @click="sureSelectTime(time)">
            {{time}}
          </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @click="cancelSelectTime">
            取消
          </li>
        </ul>
      </div>

    </div>
    <!--</div>-->
  </div>
</template>

<script>
  import Vue from "vue";
  import CryptoJS from "crypto-js";
  import Unils from "@/utils/encrypt.js";
  import myStore from '@/pages/store';

  export default {
    name: "preApplication",
    data() {
      return {
        showMoneyError: false,
        money: "",
        managername: "",
        managerList: ["张三", "李四", "王五"],
        certifytype: "",
        certifyList: ["账号", "卡号", "身份证件"],
        idtype: "",
        idTypeList: ["身份证", "军官证", "外国人居留证"],
        city: '',
        cityList: ["常州市", "徐州市", "南京市", "淮安市", "南通市", "宿迁市", "无锡市", "扬州市", "盐城市", "苏州市", "泰州市", "镇江市", "连云港市"],
        district: '',
        districtList: ["玄武区", "秦淮区", "鼓楼区", "建邺区", "栖霞区", "雨花台区", "浦口区", "江宁区", "六合区", "溧水区", "高淳区"],
        branch: '',
        branchList: ["南京银行城东支行", "南京银行和燕路支行", "南京银行大行宫支行", "南京银行江宁科学园支行", "南京银行新港支行"],
        time: '',
        timeList: ['8:30-10:00', '10:00-11:30', '13:30-15:00', '15:00-16:30'],
        subscribeType: 'person',
        year: 2020,
        month: 1,
        day: 31,
        maxday: 31,
        yearlist: [],
        monthlist: [],
        daylist: []
      }
    },
    mounted() {
      this.initYearList();
      this.initMonthList();
    },
    watch: {
      money: function (val) {
        this.money = val.replace(/\D/g, '')
      }
    },
    methods: {
      //  循环年
      //  预约只提供今年和明年
      initYearList() {
        var a = new Date();
        var year = a.getFullYear();
        for (var i = 0; i <= 1; i++) {
          this.yearlist[i] = year + i;
        }
        // console.log(this.yearlist)
      },
      //循环月
      //因为是预约，所以当前年份只能从当前月份开始
      initMonthList() {
        var date = new Date();
        var currentMonth = date.getMonth();
        var currentDay = date.getDate();
        this.month = date.getMonth() + 1;
        this.day = date.getDate() + 1;
        this.check(this.month);
        for (var i = 0; i + currentDay < this.maxday; i++) {
          this.daylist[i] = i + currentDay + 1;
        }
        for (var i = 0; i + currentMonth < 12; i++) {
          this.monthlist[i] = i + currentMonth + 1;
        }
      },
      //年份改变时
      changeYear() {
        var date = new Date();
        this.monthlist = [];
        var year = this.year;
        var currentMonth = date.getMonth();
        var currentDay = date.getDate();
        if (year == date.getFullYear()) {
          for (var i = 0; i + currentMonth < 12; i++) {
            this.monthlist[i] = i + currentMonth + 1;
          }

          if (
            this.month == date.getMonth() + 1
          ) {
            for (var i = 0; i + currentDay < this.maxday; i++) {
              this.daylist[i] = i + currentDay + 1;
            }
          } else {
            for (var i = 0; i < this.maxday; i++) {
              this.daylist[i] = i + 1;
            }
          }
        } else {
          for (var i = 0; i < 12; i++) {
            this.monthlist[i] = i + 1;
          }
          for (var i = 0; i < this.maxday; i++) {
            this.daylist[i] = i + 1;
          }
        }
      },
      //月份改变时
      changeMonth() {
        var date = new Date();
        var currentDay = date.getDate();
        this.daylist = [];
        var month = this.month;
        this.check(month);
        if (
          this.year == date.getFullYear() &&
          this.month == date.getMonth() + 1
        ) {
          for (var i = 0; i + currentDay < this.maxday; i++) {
            this.daylist[i] = i + currentDay + 1;
          }
        } else {
          for (var i = 0; i < this.maxday; i++) {
            this.daylist[i] = i + 1;
          }
        }
      },
      // 这里是一个判断月份返回相应天数的函数
      check(month) {
        if (
          month == 1 ||
          month == 3 ||
          month == 5 ||
          month == 7 ||
          month == 8 ||
          month == 10 ||
          month == 12
        ) {
          return (this.maxday = 31);
        } else if (month == 4 || month == 6 || month == 11 || month == 9) {
          return (this.maxday = 30);
        } else if (month == 2) {
          if (
            this.year % 4 == 0 &&
            (this.year % 100 != 0 || this.year % 400 == 0)
          ) {
            return (this.maxday = 29);
          } else {
            return (this.maxday = 28);
          }
        }
      },
      selectCertify() {
        mui('#certify').popover('toggle')
      },
      sureSelectCertify(manager) {
        this.certifytype = manager;
        mui('#certify').popover('toggle')
      },
      cancelSelectCertify() {
        mui('#certify').popover('toggle')
      },
      selectId() {
        mui('#id').popover('toggle')
      },
      sureSelectId(manager) {
        this.idtype = manager;
        mui('#id').popover('toggle')
      },
      cancelSelectId() {
        mui('#id').popover('toggle')
      },
      selectCity() {
        mui('#city').popover('toggle')
      },
      sureSelectCity(manager) {
        this.city = manager;
        mui('#city').popover('toggle')
      },
      cancelSelectCity() {
        mui('#city').popover('toggle')
      },
      selectDistrict() {
        mui('#district').popover('toggle')
      },
      sureSelectDistrict(manager) {
        this.district = manager;
        mui('#district').popover('toggle')
      },
      cancelSelectDistrict() {
        mui('#district').popover('toggle')
      },
      selectBranch() {
        mui('#branch').popover('toggle')
      },
      sureSelectBranch(manager) {
        this.branch = manager;
        mui('#branch').popover('toggle')
      },
      cancelSelectBranch() {
        mui('#branch').popover('toggle')
      },
      selectTime() {
        mui('#time').popover('toggle')
      },
      sureSelectTime(manager) {
        this.time = manager;
        mui('#time').popover('toggle')
      },
      cancelSelectTime() {
        mui('#time').popover('toggle')
      },
      submit() {
        this.$router.push({path: "/subscribeResult", query: {}})
      },
      cancel() {
        this.$router.push({path: "/", query: {}})
      },
      checkMoney(money) {
        if (money % 100 != 0) {
          this.showMoneyError = true
        } else {
          this.showMoneyError = false
        }
      },
      clickPerson() {
        this.subscribeType = 'person'
      },
      clickPublic() {
        this.subscribeType = 'public'
      }
    }
  };
</script>

<style scoped lang="less">
  .form {
    .fromul {
      padding: 0 10px;
      margin: 0;
      list-style-type: none;
      li {
        display: flex;
        flex: 7;
        height: 50px;
        align-items: center;
        border-bottom: 1px solid #ddd;
        > div:first-child {
          flex: 2;
          text-align: left;
        }
        > div:nth-child(2) {
          flex: 4;
          input {
            margin: 0;
            border: 0;
            font-size: 15px;
          }
        }
        > div:last-child {
          flex: 1;
          button {
            border: 0;
            border-radius: 40px;
            background: dodgerblue;
            color: white;
          }
        }
      }

      .selectManage {
        position: relative;
        &::before {
          position: absolute;
          width: 20px;
          height: 20px;
          right: 0px;
          top: 10px;
          color: #999;
          pointer-events: none;
          content: '\25BC';
        }
      }

      .dateSelect {
        width: 30%;
        margin-top: 6%
      }
    }
  }
</style>

